<template>
    <mdui-list>
        <mdui-list-item headline="自动检查更新">
            <mdui-switch slot="end-icon" :checked="setting.auto_update"
                @change="setting.auto_update = !setting.auto_update"></mdui-switch>
        </mdui-list-item>
        <mdui-list-item headline="主题">
            <mdui-radio-group :value="setting.theme" @change="setting.theme = $event.target.value" slot="end-icon">
                <mdui-radio value="light">浅色</mdui-radio>
                <mdui-radio value="auto">跟随系统</mdui-radio>
                <mdui-radio value="dark">深色</mdui-radio>
            </mdui-radio-group>
        </mdui-list-item>
        <mdui-list-item headline="主题颜色">
            <div style="height: 40px;width: 70%;display: flex;justify-self: end;" slot="end-icon">
                <div style="height: 100%;width: auto;display: flex;justify-self: end;" @click="clickEle" ref="color">
                    <div class="color flex" data-color="auto">默认</div>
                    <div class="color red flex" data-color="red"></div>
                    <div class="color purple flex" data-color="purple"></div>
                    <div class="color blue flex" data-color="blue"></div>
                    <div class="color green flex" data-color="green"></div>
                    <div class="color yellow flex" data-color="yellow"></div>
                    <div class="color grey flex" data-color="grey"></div>
                </div>
            </div>
        </mdui-list-item>
        <mdui-list-item headline="便签字体大小">
            <mdui-text-field variant="outlined" label="字体大小" slot="end-icon" :value="setting.memo_font_size"
                @change="setting.memo_font_size = $event.target.value"></mdui-text-field>
        </mdui-list-item>
        <mdui-list-item headline="便签中文字体">
            <mdui-select variant="outlined" slot="end-icon" :value="setting.memo_font_zh"
                @change="setting.memo_font_zh = $event.target.value">
                <mdui-menu-item v-for="(i, k) in fontList" :value="i" :key="k">{{ i }}</mdui-menu-item>

            </mdui-select>
        </mdui-list-item>
        <mdui-list-item headline="便签英文字体">
            <mdui-select variant="outlined" slot="end-icon" :value="setting.memo_font_en"
                @change="setting.memo_font_en = $event.target.value">
                <mdui-menu-item v-for="(i, k) in fontList" :value="i" :key="k">{{ i }}</mdui-menu-item>
            </mdui-select>
        </mdui-list-item>
    </mdui-list>
    <div class="btn">
        当前版本:{{ now_ver }}  最新版本:{{ new_ver }}
    </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import s from "@/assets/setting"
import t from "@/assets/theme"
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { useIpcRenderer } from "@vueuse/electron";
const ipcRenderer = useIpcRenderer();
//setColorScheme("rgb(219, 201, 10)")
let setting = ref({})
const settingChannel = new BroadcastChannel("setting");
let no = false
watch(setting, (o, n) => {

    console.log("触发了");
    
    if (no) {
        settingChannel.postMessage(JSON.stringify(n))
        console.log(n);
        
        s.changeSetting(JSON.stringify(n))
        if (n.theme === "auto") {
            //读取系统主题
            let is_dark = window.matchMedia("(prefers-color-scheme: dark)").matches
            if (is_dark) {
                t.checkTheme("dark")
            } else {
                t.changeTheme("light")
            }
        } else {
            t.checkTheme(n.theme)
        }

    }
    no = true

}, { deep: true })

const color = ref(null)
const fontList = ref([])

const now_ver = ref("0.0.0")
const new_ver = ref("0.0.0")

ipcRenderer.on("get-app-version", (event, arg) => {
    console.log(arg)
    now_ver.value = arg[0]
    new_ver.value = arg[1]
    ipcRenderer.removeAllListeners("get-app-version")
})
ipcRenderer.send("get-app-version")


const clickEle = (e) => {
    if (e.target.classList.length < 1) return // 点击的是div
    // 点击其他颜色时，取消当前选中状态
    for (let i = 0; i < color.value.children.length; i++) {
        if (color.value.children[i].classList.contains("color-on")) {
            if (color.value.children[i].getAttribute("data-color") === e.target.getAttribute("data-color")) { // 当前点击的颜色和当前选中的颜色相同，则取消选中
                color.value.children[i].style.animation = "shake .5s"
                setTimeout(() => {
                    color.value.children[i].style.animation = ""
                }, 500)
                return
            }
            color.value.children[i].classList.remove("color-on")

        }
    }
    if (e.target.classList.contains("color-on")) {
        e.target.classList.remove("color-on")
    } else {
        e.target.classList.add("color-on")
        //setting.value.color_theme = e.target.getAttribute("data-color")
        let theme_value = e.target.getAttribute("data-color")
        setting.value.color_theme = theme_value
        if (theme_value === "auto") {
            removeColorScheme()
        } else {
            setColorScheme(t.colorArr[theme_value])
        }
    }


}

const recoverColor = (theme) => {
    if (theme !== "auto") {
        setColorScheme(t.colorArr[theme])
    } else {
        removeColorScheme()
    }
    for (let i = 0; i < color.value.children.length; i++) {
        if (color.value.children[i].getAttribute("data-color") === theme) {
            color.value.children[i].classList.add("color-on")
        }
    }
}

onMounted(() => {
    s.getAllSetting().then(res => {
        setting.value = res.setting
        // 恢复主题颜色
        console.log(res.setting);
        recoverColor(res.setting.color_theme)
    })

    ipcRenderer.on("get-font", (event, arg) => {
        console.log(arg);
        fontList.value = arg
    })
    ipcRenderer.send("get-font")
})
</script>

<style scoped>
.color {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    /*边框*/
    border: 1px solid rgb(137, 146, 148);
    margin-left: 10px;
    float: right;
    margin-top: 5px;
    transition: all 0.1s;
    box-sizing: border-box;
}

.color:active {
    border: 1px solid rgb(83, 83, 83);
    /*缩放*/
    transform: scale(1.1);
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.red {
    background-color: #ffb4aa;
}

.purple {
    background-color: #f9abff;
}

.blue {
    background-color: #9ecaff;
}

.green {
    background-color: #78dc77;
}

.yellow {
    background-color: #dbc90a;
}

.grey {
    background-color: #4fd8eb;
}

.color-on::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;

    border-radius: 5px;
    /*缩放*/
}

.color-on {
    transform: scale(1.2);
    border: 2px solid rgb(108, 108, 108);
    transition: all 0.1s;
}

mdui-menu-item {
    line-height: 50px;
}

mdui-select::part(menu) {
    height: 256px;
    overflow: auto;
}

.btn {
    position: fixed;
    bottom: 5px;
    width: calc(100% - 80px);
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: rgb(136, 136, 136);
    /*禁止选择*/
    user-select: none;
}
</style>